<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #chart {
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script>
      let data = [
        {
          name: '黑龙江省',
          value: 199,
        },
        {
          name: '山东省',
          value: 69,
        },
      ];

      const chartDom = document.querySelector('#chart');
      const myChart = echarts.init(chartDom);
      let mapName = 'china';
      let chinaMap; //geo地图
      const myChartInit = () => {
        let geoCoordMap = {};
        const mapFeatures = echarts.getMap(mapName).geoJson.features;
        mapFeatures.forEach(function (v) {
          // 地区名称
          let name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.center;
        });
        const convertData = function (data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          console.log('res', res);
          return res;
        };
        let option = {
          tooltip: {
            trigger: 'item',
          },
          geo: [
            {
              show: true,
              map: mapName,
              itemStyle: {
                borderColor: '#000',
                borderWidth: 1,
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,1)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
              },
            },
          ],
          series: [
            // 散点（气泡）图
            {
              type: 'effectScatter',
              // scatter 散点（气泡）图
              // effectScatter 带有涟漪特效动画的散点（气泡）图
              coordinateSystem: 'geo',
              data: [...convertData(data)],
              symbolSize: function (val) {
                return val[2] / 10;
              },
              label: {
                show: true,
                position: 'right',
                color: 'green',
                formatter: (param) => {
                  const { name } = param;
                  return name;
                },
              },
              itemStyle: {
                color: 'red',
              },
            },
            {
              type: 'map',
              map: mapName,
              name: '中国',
              data: [...data],
            },
          ],
        };
        option && myChart.setOption(option);
      };
      $.ajax({
        url: '../lib/chinaMap.json',
        success: (mapjson) => {
          chinaMap = mapjson;
          echarts.registerMap(mapName, chinaMap); //注册地图
          myChartInit();
        },
      });
    </script>
  </body>
</html>
